<template>
	<view>
		<uni-nav-bar @clickLeft="onClickLeft" @clickRight="onClicKRight" left-icon="back" right-text="发布">
			<view @click="chooseShowType" class="uni-navbar__header-container">
				{{ showType }}
				<icon class="pull_icon iconfont icon-xiala"></icon>
			</view>
		</uni-nav-bar>
		<view class="input_box"><textarea v-model="textValue" class="input_text" placeholder="说一句话吧~"></textarea></view>
		<UploadImage @remove="deletePics" @upload="addPicItems"></UploadImage>
		<!-- 对话框 -->
		<UniPopup></UniPopup>
		<LModel ref="showModel"></LModel>
	</view>
</template>

<script>
import { uniNavBar } from '@dcloudio/uni-ui';
import UploadImage from '../../components/unloadImage/unloadImage.vue';
import LModel from '../../components/l-modal/l-modal.vue';
export default {
	components: {
		uniNavBar,
		UploadImage,
		LModel
	},
	data() {
		return {
			showType: '所有人可见',
			// 显示类型
			itemList: ['所有人可见', '部分可见'],
			// 监听文本框
			textValue: '',
			// 存储上传的图片
			uploadImages: []
		};
	},
	created() {
	let textValue=	uni.getStorageSync('textValue')
	let uploadImages=uni.getStorageSync('unloadImages')||[]
	this.textValue=textValue
	this.uploadImages=uploadImages
	},
	methods: {
		onClickLeft() {
			// 判断文本框和图片是否有值
			if (!this.textValue && this.uploadImages.length<1) {
				uni.navigateBack({
					delta: 1
				});
				return;
			}
			this.saveText();
		},
		// 是否保存草稿
		saveText() {
			uni.showModal({
				title: '提示',
				content: '是否保存草稿',
				success: res => {
					if (res.confirm) {
						try {
							// 将数据存储缓存
							uni.setStorageSync('textValue', this.textValue);
							// 保存上传的图片
							uni.setStorageSync('unloadImages',this.uploadImages) 
							uni.navigateBack({
								delta: 1
							});
						} catch (e) {
							// error
							console.log(e);
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
						uni.setStorageSync('textValue','')
						uni.setStorageSync('unloadImages',[])
						this.textValue=''
						this.uploadImages=[]
						uni.navigateBack({
							delta: 1
						});
					}
				}
			});
		},
		// 存储上传的图片
		addPicItems(srcItems) {
			this.uploadImages = srcItems;
		},
		// 删除图片
		deletePics(index) {
			this.uploadImages.splice(index, 1);
		},
		// 发布
		onClicKRight() {
			console.log('发布');
			this.$refs.showModel.handleCancel();
		},
		chooseShowType() {
			uni.showActionSheet({
				itemList: this.itemList,
				success: res => {
					this.showType = this.itemList[res.tapIndex];
				}
			});
		}
	}
};
</script>

<style lang="less">
.addPics {
	height: 300rpx;
	width: 300rpx;
	border: 2rpx solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #d9d9d9;
	font-size: 200rpx;
}
.add_pic {
	height: 300rpx;
	width: 300rpx;
	text-align: center;
	background-color: #f5f5f5;
	line-height: 300rpx;
	font-size: 200rpx;
	color: #dcdcdc;
}
uni-nav-bar {
	.uni-navbar__header-container {
		display: flex;
		justify-content: center !important;
		.pull_icon {
			padding-left: 10rpx;
		}
	}
}

.input_text {
	padding: 15rpx;
	height: 300rpx;
	width: 100%;
}
</style>
